<template>
  <div id="qian">
  <div class="box">
    <h1 @click="hui"><van-icon name="arrow-left" /></h1>
    <h2>您的可用积分为</h2>
    <h3>343</h3>
   
  </div>  
   <div class="box2">
      连续签到2天
    </div>
    <div class="box3">
        <h4>签到</h4>
    </div>
    <div class="box4">
      <ul>
        <li>
          <img src="../assets/imgs/10.jpg" alt="">
        </li>
        <li>
           <p>消费购物</p>
          <p>购物完成，确认收货后立返积分</p>
        </li>
        <li>
          <p @click="gouwu">去购物</p>
        </li>
      </ul>
    </div>
    <div class="box4 tou">
      <ul>
        <li>
          <img src="../assets/imgs/11.jpg" alt="">
        </li>
        <li>
          <p>积分兑换</p>
          <p>积分兑好礼，20积分即可兑换礼劵</p>
        </li>
        <li>
          <p @click="lingjuan">去兑换</p>
        </li>
      </ul>
    </div>
 </div>
</template>

<script>
import { getqiandao } from '../utils/api'
import '../assets/imgs/9.jpg'
export default {
  name: '',
  data() { 
    return {

    }
  },
  created() {
   
   
    getqiandao(JSON.stringify(localStorage.getItem('token'))).then(res=>{
     
      console.log(res);
    })
  },
  methods:{
    // 返回上一页
      hui(){
        this.$router.go(-1)
      },
      // 去首页
      gouwu(){
        
        this.$router.push('/home')
      },
      // 去领劵
      lingjuan(){
        this.$router.push('/lingjuan')
      }
  },
 }
</script>

<style scoped lang='scss'>
.tou{
  background-color: #EDE6D6;
}
.box{
  width: 100%;
  height: 230px;
  background-color: #FBF7EC;
  overflow: hidden;
  h1{
    font-size: 24px;
    margin-top: 10px;
    margin-left: 10px;
    
    height: 80px;
  }
  h2{
    width: 100%;
   
    text-align: center;
    text-align: center;
    font-size: 14px;
    
    color: #cccc;
  }
  h3{
    width: 100%;
    height: 124px;
    // background-color: red;
    text-align: center;
    line-height: 124px;
    font-size: 28px;
    font-weight: 700;
    color: #B3A078;
  }
}
.box2{
  width: 100%;
  height: 70px;
  background-color: #E8E1CF;
  text-align: center;
  line-height: 70px;
  font-size: 18px;
  color: white;
}
.box3{
  width: 100%;
  height: 70px;
  // background-color: red;
   overflow: hidden;
  h4{
    width: 160px;
    height: 35px;
    background-color: #B3A078;
    color: white;
    text-align: center;
    line-height: 35px;
      margin: auto;
      margin-top: 17px;
      border-radius: 10px;
  }
}
.box4{
  width: 90%;
  height: 80px;
  background-color: #F4EBE2;
  margin: 0 auto;
  border-radius: 5px;
  margin-top: 20px;
  ul{
    width: 100%;
    display: flex;
    li:nth-child(1){
      width: 23%;
      background-color: red;
      height: 80px;
      img{
        width: 100%;
        height: 100%;
      }
    }
     li:nth-child(2){
       width: 55%;
      //  background-color: blue;
      P{
        margin-top: 20PX;
        font-size: 12PX;
        color: #C7A778;
      }
     }
     li:nth-child(3){
      width: 22%;
     
      p{
        margin-top: 20px;
        line-height: 30px;
        border-radius: 5px;
        width: 60px;
        height: 30px;
        text-align: center;
         background-color: #E1B68C;
         font-size: 12px;
         color: white;

      }
     }
  }
}
</style>